<template>
  <div class="parkPictureWrap" ref="parkPictureWrap">
    <div class="pageTableInner">
      <div class="infoSearchWrap">
        <div class="infoSearchOne">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="searchWrap">
                <span class="searchFont">行政区域:</span>
                <span class="searchInputFont" >
                  <el-select style="width: 100%;" v-model="searchInfo.parentId" :disabled="$store.state.userInfo.regionId?true:false" @change="changeDistrict(searchInfo.parentId)" size="mini"
                             clearable placeholder="行政区">
                    <el-option
                      v-for="item in $store.state.districtData"
                      :key="item.id"
                      :label="item.regionName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">企业:</span>
                <span class="searchInputFont">
                <el-select v-model="searchInfo.enterpriseNo" size="mini" @change="selectGovAreaMap" clearable placeholder="全部">
                      <el-option
                        v-for="item in this.$store.state.companyInfos"
                        :key="item.enterpriseNo+''"
                        :label="item.enterpriseName"
                        :value="item.enterpriseNo+''">
                      </el-option>
                    </el-select>
                </span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">时间:</span>
                <span class="searchInputFont">
                   <el-date-picker
                     v-model="searchInfo.statisTime"
                     @change="selectGovAreaMap"
                     style="width: 100%;"
                     align="right"
                     type="date"
                     size="mini"
                     value-format="yyyy-MM-dd 00"
                     placeholder="选择日期"
                     :picker-options="pickerOptions1">
                  </el-date-picker>

                </span>
              </div>
            </el-col>
            <div style="float: right;margin-right: 10px;">
              <el-button type="primary" size="mini" @click="selectGovAreaMap()">查询</el-button>

            </div>
          </el-row>
        </div>
      </div>
      <div class="mapContentWrap">
        <mapBicycletest
          :parentId="searchInfo.parentId"
          :mapInfolist="mapInfolist"
          :streetData="streetData"
          :searchInfo="searchInfo"
          :times="times"
          ref="mapFun"
          @selectGovAreaMap="selectGovAreaMap"
        ></mapBicycletest>


      </div>
    </div>
  </div>
</template>

<script>
  import mapBicycletest from "./mapRack.vue"

  export default {
    props: [],
    data(){
      return {
        searchInfo: {
          "enterpriseNo":"",
          "parentId":this.$store.state.userInfo.regionId,
          "regionId":"",
          "statisTime":""
        },
        streetData: [],
        railInfo: [],
        siteInfo: [],
        typeList: [
          {
            value: '',
            label: '全部'
          },
          {
            value: '0',
            label: '停放区'
          },
          {
            value: '1',
            label: '禁停区'
          }, {
            value: '2',
            label: '规范停放区'
          }, {
            value: '3',
            label: '动态调节区'
          }, {
            value: '4',
            label: '临时监控区'
          }],
        colorslist: [
          {
          color: '#53CB63',
          label: '停放区',
          areaType: 0,
          count: '0'
        },  {
          color: '#FF5050',
          label: '禁停区',
          areaType: 1,
          count: '0'
        },{
          color: '#D34FFE',
          label: '规范停放区',
          areaType: 2,
          count: '0'
        }, {
          color: '#3975fe',
          label: '动态调节区',
          areaType: 3,
          count: '0'
        }, {
          color: '#FF9E36',
          label: '临时监控区',
          areaType: 4,
          count: '0'
        }],
        areaInfo:[[],[],[],[],[]],
        times:[0,0,0,0],
        mapInfolist:[],
        pickerOptions1: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
      }
    },
    components: {
      mapBicycletest
    },
    created(){
      this.searchInfo.statisTime=this.dtime().format('YYYY-MM-DD 00')
//      获取首次数据
        if(this.$store.state.userInfo.regionId){
          this.changeDistrict(this.searchInfo.parentId)
        }else {
          this.selectGovAreaMap()
        }
    },
    destroyed(){


    },
    methods: {
      //改变行政区 获取街道
      changeDistrict(parentId){
        this.searchInfo.regionId=""
        if(!parentId){
          this.streetData=[]
          this.selectGovAreaMap()
          return
        }
        this.axios.post(process.env.API_HOST + '/common/selectRegion', {parentId: parentId})
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.streetData = result.result
              this.selectGovAreaMap()
            }
          })

      },

      selectGovAreaMap(){
        this.mapInfolist=[]
        this.times=[]
        this.axios.post(process.env.API_HOST + `/vehicle/selectVehicleHour`,{
          parentId:this.searchInfo.parentId?this.searchInfo.parentId:0,
          statisTime:this.searchInfo.statisTime?this.searchInfo.statisTime:"",
          enterpriseNo:this.searchInfo.enterpriseNo,
          regionId:this.searchInfo.regionId,
        } )
          .then(response => {
            const result = response.data
            if (result.code == 200&&JSON.stringify(result.result) != "{}") {
              for (let i in result.result){
                this.times.push(i.split(" ")[1]+":00")
                  result.result[i].forEach(item=>{
                    if(this.searchInfo.parentId){
                      this.streetData.forEach(item1=>{
                        if(item.regionId==item1.id){
                          item.lng=item1.lng
                          item.lat=item1.lat
                        }
                      })
                    }else {
                      this.$store.state.districtData.forEach(item1=>{
                        if(item.regionId==item1.id){
                          item.lng=item1.lng
                          item.lat=item1.lat
                        }
                      })
                    }
                  })
                this.mapInfolist.push(result.result[i])
              }
            }
            if(this.searchInfo.parentId){
              this.$store.state.districtData.forEach(item1=>{
                if(this.searchInfo.parentId==item1.id){
                  this.$refs.mapFun.showAreaPoints(JSON.parse(item1.regionPoints))
                }
              })
            }else {
              this.$refs.mapFun.showAreaPoints()
            }
          })
      },

    }
  }
</script>


<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .parkPictureWrap
    page()
    .mapContentWrap
      position absolute;
      left 0px;
      right 0px
      bottom 0px
      top 78px
      padding: 10px;
      box-sizing: border-box;
      border-radius: 5px;
      background-color: white;
</style>
